<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>终端列表</title>
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
    <link rel="stylesheet" th:href="@{/lib/flatpickr/flatpickr.min.css}">
</head>

<body>
<div class="app-page">

    <div class="app-page-content">

        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">
                    <!-- 过滤器 -->
                    <form class="filter">
                        <div class="filter-group">
                            <div class="filter-item">
                                <div class=" form-item row">
                                    <div class="label"><label>创建开始时间</label></div>
                                    <div class="body">
                                        <input type="text" placeholder="开始时间" name="startTime" class="ft-time">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>创建结束时间</label></div>
                                    <div class="body">
                                        <input type="text" placeholder="结束时间" name="endTime" class="ft-time">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>终端序列号</label></div>
                                    <div class="flex1">
                                        <input type="text" placeholder="终端序列号" name="deviceCode">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="filter-group">
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>MAC</label></div>
                                    <div class="flex1">
                                        <input type="text" placeholder="MAC" name="deviceMac">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>商家</label></div>
                                    <div class="flex1">
                                        <input type="text" placeholder="商家名称" name="companyName">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item form-item row">
                                <div class="label"><label>终端名</label></div>
                                <div class="flex1">
                                    <input type="text" placeholder="终端名" name="deviceName">
                                </div>
                            </div>
                        </div>
                        <div class="filter-group">
                            <div class=" form-item row">
                                <div class="filter-item">
                                    <div class="form-item row">
                                        <div class="label">选择省份</div>
                                        <div class="body">
                                            <select name="province" class="select-province" data-rule="required" data-name="省份">
                                            <option value="">选择所在省份</option>
                                        </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="filter-item">
                                    <div class="form-item row">
                                        <div class="label">选择城市</div>
                                        <div class="body">
                                            <select name="city" class="select-city" data-rule="required" data-name="市区">
                                            <option value="">选择所在市区</option>
                                        </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="filter-item">
                                    <div class="form-item row">
                                        <div class="label">选择区县</div>
                                        <div class="body">
                                            <select name="area" class="select-district" data-rule="required" data-name="区县">
                                            <option value="">选择所在区县</option>
                                        </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="filter-item">
                                    <button class="z-btn z-primary">查询</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">

                    <div class="z-btn-group">
                        <button data-state="3" id="export-device" class="j-btn-control z-btn z-default edit-dept" data-editDept>导出</button>
                    </div>

                    <table class="z-table">
                        <thead>
	                        <th>创建时间</th>
	                        <th>终端序列号</th>
	                        <th>设备mac</th>
	                        <th>终端名</th>
	                        <th>省</th>
	                        <th>市</th>
	                        <th>区</th>
	                        <th>在线状态</th>
	                        <th>机型</th>
	                        <th>所属商家</th>
	                        <th>操作</th>
                        </thead>
                        <tbody>
	                        <tr th:each="deviceInfo: ${list}">
	                            <td th:text="${deviceInfo.createTimeDesc}"></td>
	                            <td th:text="${deviceInfo.deviceCode}"></td>
	                            <td th:text="${deviceInfo.deviceMac}"></td>
	                            <td th:text="${deviceInfo.deviceName}"></td>
	                            <td th:text="${deviceInfo.province}"></td>
	                            <td th:text="${deviceInfo.city}"></td>
	                            <td th:text="${deviceInfo.area}"></td>
	                            <td>
                                    <span th:if="${deviceInfo.deviceStatus == 0}">在线</span>
                                    <span th:if="${deviceInfo.deviceStatus == 1}">离线</span>
                                </td>
	                            <td th:text="${deviceInfo.deviceModel}"></td>
	                            <td th:text="${deviceInfo.companyName}"></td>
	                            <td class="btn-group">
	                                <a th:href="'deviceDetail?deviceCode='+ ${deviceInfo.deviceCode}" class="layer-open" data-title="详情">详情</a>
	                                <a th:href="'deviceLog?deviceCode='+ ${deviceInfo.deviceCode}" class="layer-open" data-title="日志">日志</a>
	                            </td>
	                        </tr>
                        </tbody>
                    </table>

	                <!-- 分页信息 -->
	                <div class="app-card-body">
	                    <!-- 前端分页 -->
	                    <div class="pagination z-pat z-fr"></div>
	                </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script th:src="@{/lib/flatpickr/flatpickr.js}"></script>
<script th:src="@{/lib/flatpickr/zh.js}"></script>
<script th:src="@{/js/address-0.0.3.js}"></script>
<!-- <script th:src="@{/js/cityPicker.js}"></script> -->
<script>
	//获取context path
	var context = $("meta[name='ctx']").attr("content");
	
    // 从URL加载搜索数据
    $(".filter").formLoad(App.query);
	
 	//处理分页
    var pageNum = [[${pageNum}]];
    var pageSize = [[${pageSize}]];
    var total = [[${total}]];
    // 省市区
    var province =  '[[${province}]]';
    var city = '[[${city}]]';
    var area = '[[${area}]]';
    // 省市区
    $(".filter").address({
        provinceText: '选择省',
        cityText: '选择市',
        districtText: '选择区',
        apiUrl: 'http://xc-dmp.37226.com/api/area',
        // 默认值
        defaultProvince: province,
        defaultCity: city,
        defaultDistrict: area,
    });
    
    var pagination = new Pagination(".pagination", {
        pageIndex: pageNum, // 当前页数
        pageSize: pageSize, // 每页数量
        count: total, // 总条数
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function (pageIndex) {
            var url = context + "/ckDeviceInfo/listByPage";
            var paramStr = createParamStr(pageIndex, pageSize);
            if(paramStr !== ""){
                paramStr = paramStr.substring(1);
                url = url + "?" + paramStr;
            }
            window.location.href = url;
        }
    });
    
    /**
     * 创建参数字符串
     * @param pageIndex 当前页
     * @param pageSize 每页条数
     * @returns {string} 参数字符串
     */
    function createParamStr(pageIndex, pageSize) {
    	var startTime = $("input[name='startTime']").val();
    	var endTime = $("input[name='endTime']").val();
    	var deviceName = $("input[name='deviceName']").val();
        var companyName = $("input[name='companyName']").val();
        var deviceCode = $("input[name='deviceCode']").val();
        var deviceMac = $("input[name='deviceMac']").val();
        var provinceSelect = $("select[name='province']").val();
        var citySelect = $("select[name='city']").val();
        var areaSelect = $("select[name='area']").val();
        var url = "";
        if(!isBlank(pageIndex)){
            url = url + "&pageNum=" + pageIndex;
        }
        if(!isBlank(pageSize)){
            url = url + "&pageSize=" + pageSize;
        }
        if(!isBlank(startTime)){
            url = url + "&startTime=" + startTime;
        }
        if(!isBlank(endTime)){
            url = url + "&endTime=" + endTime;
        }
        if(!isBlank(deviceName)){
            url = url + "&deviceName=" + deviceName;
        }
        if(!isBlank(companyName)){
            url = url + "&companyName=" + companyName;
        }
        if(!isBlank(deviceCode)){
            url = url + "&deviceCode=" + deviceCode;
        }
        if(!isBlank(deviceMac)){
            url = url + "&deviceMac=" + deviceMac;
        }
        if(!isBlank(provinceSelect)){
            url = url + "&province=" + provinceSelect;
        }
        if(!isBlank(citySelect)){
            url = url + "&city=" + citySelect;
        }
        if(!isBlank(areaSelect)){
            url = url + "&area=" + areaSelect;
        }
        return url;
    }
    
   	 //检查参数
     function isBlank(param) {
         if(undefined === param){
             return true;
         }
         if(null == param){
             return true;
         }
         if("" === param){
             return true;
         }
         return false;
     }
     
    //初始化时间选择
    flatpickr.localize(flatpickr.l10ns.zh); // 设置为中文
    flatpickr(".ft-time", {
        // mode: "range",
        // 否启用时间选择
        enableTime: true,
        // 选择器中是否可以选择秒
        enableSeconds: true,
        time_24hr: true,
        dateFormat: 'Y-m-d H:i:S'
    });
    
  	//导出excel
    $('#export-device').click(function () {
        var url = context + "/ckDeviceInfo/exportDeviceReport";
        var paramStr = createParamStr(pageNum, pageSize);
        if(paramStr !== ""){
            paramStr = paramStr.substring(1);
            url = url + "?" + paramStr;
        }
        window.location.href = url;
    });
    
</script>
<script>
</script>

</body>

</html>